<template>
  <div class="swiper">
    <div class="swiper-img">
      <img :src="url" alt="" />
    </div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="(item, index) in swiperUrl"
          :key="index"
        >
          <img :src="item.url" alt="" />
        </div>
      </div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
</template>

<script>
import Swiper from '@/utils/swiper/swiper.min.js';
export default {
  name: 'Swiper',
  components: {},
  props: {},
  data() {
    return {
      swiperUrl: [
        {
          url: 'https://img0.baidu.com/it/u=2862534777,914942650&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
        },
        {
          url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F113020142315%2F201130142315-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655026677&t=0a6e5652edabe955301a38a0ac57ebdc',
        },
        {
          url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F052420110515%2F200524110515-11-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655026677&t=8eef4be6d46657cad2ca5f6afbd7ffac',
        },
        {
          url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F21061109241GT3-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655026677&t=fd4753168645bd70ab5ee6d8be7e9d0f',
        },
        {
          url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242306111155-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655026677&t=fe24234d58e47f6b8df4fff981bff784',
        },
        {
          url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F0G020114924%2F200G0114924-15-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655026677&t=5330f518739984d96cb9bc9d1d9e2da9',
        },
        {
          url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F0F420110430%2F200F4110430-6-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655026677&t=3b81105c43bcc7126ef8cc08f7702395',
        },
        {
          url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F21031FKU44S6-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655026677&t=d0c42340655c217a4768d6130dfbbc02',
        },
        {
          url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F052020135049%2F200520135049-15-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655026677&t=ea54e7475ebdd250faef902cca56d7cc',
        },
      ],
      url: '',
    };
  },
  computed: {},
  watch: {},
  created() {
    const that = this;
    that.url = that.swiperUrl[0].url;
  },
  methods: {},
  mounted() {
    const that = this;
    var mySwiper = new Swiper('.swiper-container', {
      autoplay: 3000, //可选选项，自动滑动
      initialSlide: 1, // 初始化索引
      slidesPerView: 3,
      centeredSlides: true,
      spaceBetween: 20,
      prevButton: '.swiper-button-prev', // 箭头
      nextButton: '.swiper-button-next', // 箭头
      onSlideChangeStart: function (swiper) {
        that.url = that.swiperUrl[swiper.activeIndex].url;
        console.log(swiper.activeIndex);
      },
    });
  },
};
</script>

<style scoped lang="less">
@import '../../utils/swiper/swiper.min.css';

.swiper-button-prev {
  left: unset;
  width: 44px;
  background-size: 44px 44px;
  background-image: url('../../assets/iconfont-download/swiper_button_left.png');
}

.swiper-button-next {
  right: 0;
  width: 44px;
  background-size: 44px 44px;
  background-image: url('../../assets/iconfont-download/swiper_button_right.png');
}

.swiper {
  .swiper-img {
    width: 100%;
    height: 180px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .swiper-container {
    margin-top: 20px;

    .swiper-wrapper {
      height: 44px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
